{% extends base.html %}

{% block body %}

{% set title = "浏览器信息" %}
{% include "tools/base_title.html" %}

<div class="col-md-12">
<table class="table">
    <tr>
        <th>Name</th>
        <th>Value</th>
    </tr>
    <tr>
        <td>User Agent</td>
        <td id="userAgent"></td>
    </tr>
    <tr>
        <td>AppName</td>
        <td id="appName"></td>
    </tr>
    <tr>
        <td>AppVersion</td>
        <td id="appVersion"></td>
    </tr>
    <tr>
        <td>Vendor</td>
        <td id="vendor"></td>
    </tr>
    <tr>
        <td>Screen</td>
        <td id="screen"></td>
    </tr>
    <tr>
        <td>InnerSize</td>
        <td id="innerSize"></td>
    </tr>
    <tr>
        <td>getUserMedia</td>
        <td id="checkGetUserMedia"></td>
    </tr>
    <tr>
        <td>RTCPeerConnection</td>
        <td id="checkRTCPeerConnection"></td>
    </tr>
    <tr>
        <td>Worker</td>
        <td id="checkWorker" type-name="Worker" class="check-support"></td>
    </tr>
    <tr>
        <td>FileReader</td>
        <td type-name="FileReader" class="check-support"></td>
    </tr>
    <tr>
        <td>WebSocket</td>
        <td type-name="WebSocket" class="check-support"></td>
    </tr>
    <tr>
        <td>FormData</td>
        <td type-name="FormData" class="check-support"></td>
    </tr>
</table>
</div>

<script type="text/javascript">
$("#userAgent").html(navigator.userAgent);
$("#appName").html(navigator.appName);
$("#appVersion").html(navigator.appVersion);
$("#vendor").html(navigator.vendor);
$("#screen").html(screen.width+"x"+screen.height);
$("#checkGetUserMedia").html(navigator.getUserMedia ? navigator.getUserMedia.toString() : undefined);
$("#checkRTCPeerConnection").html(window.RTCPeerConnection ? window.RTCPeerConnection.toString() : undefined);
$(document).ready(function () {
    $(".check-item").each(function (index) {
        var typeName = $(this).attr("type-name");
        console.log(index + ":" + typeName);
        console.log(window[typeName]);
        if (typeof window[typeName]) {
            $(this).html(window[typeName].toString());
        }
    })
    $(".check-support").each(function (index) {
        var typeName = $(this).attr("type-name");
        console.log(index + ":" + typeName);
        console.log(window[typeName]);
        if (typeof window[typeName]) {
            $(this).html("Support");
        }
    })
})
$("#innerSize").text(window.innerWidth + "x" + window.innerHeight);
</script>
{% end %}